<script setup lang="ts">
import * as video from '@/apis/video'
import { type typeCalss } from '@/apis/video'
import * as helper from '@/util/helper'

import { ref, type Ref, watchEffect } from 'vue'
import * as admin from '@/apis/admin'
import { type siperType } from '@/apis/admin'
import { onMounted } from 'vue'

let classList: Ref<typeCalss[]> = ref([])

let swiperList: Ref<siperType[]> = ref([])
let itClass = ref('')
let loading = ref(true)

onMounted(() => {
  video.getClass().then(res => {
    res.data = res.data.data
    classList.value = res.data
    loading.value = false
    itClass.value = classList.value[0].type_id
  })
})

watchEffect(() => {
  swiperList.value = []
  loading.value = true
  video.getSwiper(itClass.value).then(res => {
    swiperList.value = res.data.data
    loading.value = false
  })
})

const addSwiper = () => {
  swiperList.value.push({
    _id: helper.makeRandom(16),
    vod_name: '',
    vod_info: '',
    vod_index: swiperList.value.length,
    vod_img_small: '',
    vod_img: '',
    type_id: itClass.value
  })
}

const delSwiper = (e: siperType) => {
  for (let i in swiperList.value) {
    if (swiperList.value[i]._id == e._id) {
      swiperList.value.splice(parseInt(i), 1)
      break
    }
  }
}

const dialogFormVisible = ref(false)
const dialogValue = ref('')
const dialogKeyName = ref('')
let edit_id = ''
const edit = (row: any, key: string) => {
  edit_id = row._id
  dialogKeyName.value = key
  dialogValue.value = row[key]
  dialogFormVisible.value = true
}

const sureEdit = () => {
  dialogFormVisible.value = false

  for (let i in swiperList.value) {
    if (swiperList.value[i]._id == edit_id) {
      swiperList.value[i][dialogKeyName.value] = dialogValue.value
      break
    }
  }
}

function saveList() {
  let sort = swiperList.value.sort((a, b) => {
    return a.vod_index - b.vod_index
  })
  loading.value = true
  admin.editSwiper(itClass.value, sort).then(res => {
    loading.value = false
    if (res.data.code != 200) {
      ElMessage(res.data.msg)
      return
    }
    ElMessage('上传成功')
  })
}
</script>

<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div style="height: 20px"></div>
      <div class="card-header" v-if="classList.length > 0">
        <el-form>
          <el-form-item label="轮播板块:">
            <el-select v-model="itClass" placeholder="Select">
              <el-option v-for="item in classList" :key="item.type_id" :label="item.type_name" :value="item.type_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作:">
            <el-button @click="saveList">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <el-table :data="swiperList" border table-layout="auto" :default-sort="{ prop: 'vod_index', order: 'ascending' }">
      <el-table-column label="顺序">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 10px">{{ scope.row.vod_index }}</span>
            <el-button size="small" @click="edit(scope.row, 'vod_index')">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="剧集">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 10px">{{ scope.row.vod_name }}</span>
            <el-button size="small" @click="edit(scope.row, 'vod_name')">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="剧集ID">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 10px">{{ scope.row.vod_id }}</span>
            <el-button size="small" @click="edit(scope.row, 'vod_id')">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 10px">{{ scope.row.vod_info }}</span>
            <el-button size="small" @click="edit(scope.row, 'vod_info')">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="大图">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image style="width: 200px; height: 100px" :src="scope.row.vod_img" fit="cover" />
            <span style="width: 10px"></span>
            <el-button size="small" @click="edit(scope.row, 'vod_img')">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="小图">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image style="width: 70px; height: 100px" :src="scope.row.vod_img_small" fit="cover" />
            <span style="width: 10px"></span>
            <el-button size="small" @click="edit(scope.row, 'vod_img_small')">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #header>
          <span style="padding-right: 10px">操作</span>
          <el-button size="small" @click="addSwiper">添加</el-button>
          <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
        </template>
        <template #default="scope">
          <el-button size="small" @click="delSwiper(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="vod_index" class-name="noShowColumn" label-class-name="noShowColumn" />
    </el-table>
  </el-card>

  <el-dialog v-model="dialogFormVisible" title="编辑">
    <el-form @submit.prevent>
      <el-form-item :label="dialogKeyName">
        <el-input v-model="dialogValue" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="sureEdit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
<style>
.noShowColumn {
  display: none;
}
</style>
